<template>
<div>
  <navTop title="详情"></navTop>
  <div class="companyDetail">
      <div class="companyDetail-top">
        <div class="top">
          <div class="logo">
            <img :src="data.logo||'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/1726132616782.jpg'"/>
          </div>
          <div class="company_name">
            {{ data.company_name }}
          </div>
          <div class="company_score">
            <div class="score">{{ data.score }}</div>
            <div class="score_title">投资意向分</div>
          </div>
        </div>
        <div class="tel">
          <img class="icon" src="../assets/img/company/tel.png"/>
          <div class="telphone">021-6565654</div>
          <div class="more">更多 <img class="imore" src="../assets/img/company/more.png"/></div>
        </div>
        <div class="label_list">
          <div class="blue label" v-for="i,k in data.chain_name" v-if="k < 5">{{ i }}</div>
          <div class="orige label" v-for="i,k in data.label_info" v-if="k < 5">{{ i }}</div>
        </div>
        <div class="address">
          <div class="city"><img src="../assets/img/address.png"/><span v-for="i,k in data.city_name"><span v-if="k !== 0 ">-</span>{{ i }}</span> </div>
          <div class="address_info">{{ data.address }}</div>
        </div>
    </div>
    <div class="analysis">
      <div class="content">
        <div class="des">当前企业分析，第一时间获取信息</div>
        <div class="btn">查看分析</div>
      </div>
    </div>
    <div class="companyInfo">
      <div class="title">
        <img src="../assets/img/company/park.png" >
        企业信息
      </div>
      <div class="des">
        {{ data.desc }}
      </div>
      <div class="more">
        <img src="../assets/img/company/more_down.png" >
      </div>
    </div>
    <div class="foundation">
      <div class="info">
        基础信息
      </div>
      <div class="info_list">
        <div class="info_item orige">
          <div class="info_item_title">注册资金：</div>
          <div class="info_item_des">{{ business.reg_cap }}</div>
        </div>
        <div class="info_item">
          <div class="info_item_title">实缴资金：</div>
          <div class="info_item_des">{{ business.reg_cap_unit	}}</div>
        </div>
        <div class="info_item orige">
          <div class="info_item_title">公司法人：</div>
          <div class="info_item_des">{{ data.legal }}</div>
        </div>
        <div class="info_item">
          <div class="info_item_title">社保人数：</div>
          <div class="info_item_des">{{ business.insured_number	}}人</div>
        </div>
        <div class="info_item orige">
          <div class="info_item_title">注册时间</div>
          <div class="info_item_des">{{ business.reg_time }}</div>
        </div>
        <div class="info_item">
          <div class="info_item_title">公司状态：</div>
          <div class="info_item_des">{{ business.com_state }}</div>
        </div>
        <div class="info_item orige">
          <div class="info_item_title">所属行业：</div>
          <div class="info_item_des">{{ business.industry }}</div>
        </div>
      </div>
    </div>
    
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/characteristic.png" >
        企业特征
      </div>
      <div class="icon_des">
        <div class="icon_des_item" v-for="item,key in data.features" :key="key">
          <div class="img"><img :src="item.icon" ></div>
          <div class="title-des">{{ item.name }}</div>
        </div>
        <!-- <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/characteristic-2.png" ></div>
          <div class="title-des">上市公司</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/characteristic-3.png" ></div>
          <div class="title-des">高新技术</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/characteristic-4.png" ></div>
          <div class="title-des">其他资质证书</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/characteristic-5.png" ></div>
          <div class="title-des">500强</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/characteristic-6.png" ></div>
          <div class="title-des">事业单位</div>
        </div> -->
      </div>
    </div>
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/chain.png" >
        产业链标签
      </div>
      <div class="icon_des">
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/chain-1.png" ></div>
          <div class="title-des">新能源</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/chain-2.png" ></div>
          <div class="title-des">通用标签</div>
        </div>
      </div>
    </div>
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/company.png" >
        企业
      </div>
      <div class="des_des">
        <div class="des_des_item">
          <div class="score">{{ data.ty_score }}</div>
          <div class="title-des">企业意向分</div>
        </div>
        <div class="des_des_item">
          <div class="score">{{ data.score }}</div>
          <div class="title-des">投资意向分</div>
        </div>
        <div class="des_des_item">
          <div class="icon"><img src="../assets/img/company/report-1.png" ></div>
          <div class="title-des orige">点击获取尽调报告</div>
        </div>
      </div>
    </div>
    
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/gaoguan.png" >
        企业高管
      </div>
      <div class="icon_des">
        <div class="icon_des_item" v-for="item,key in member" :key="key">
          <div class="img"><img src="../assets/img/company/gaoguan-1.png" ></div>
          <div class="title-des">{{ item.name }}</div>
        </div>
      </div>
    </div>
    
    <!-- <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/product.png" >
        产品介绍
      </div>
      <div class="icon_des">
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/product-1.png" ></div>
          <div class="title-des">重卡储能</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/product-1.png" ></div>
          <div class="title-des">智能机器人</div>
        </div>
      </div>
    </div> -->

    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/gaoguan.png" >
        企业股东
      </div>
      <div class="content">
        <div class="info">
          基础信息
        </div>
        <div class="content_des">
          <div class="content_info_item" v-for="(item,key) in holderList" :key="key" v-if="item.type === 0">
            <div class="content_info_item_top">
              <div class="content_info_item_title" :class="'y-' + key%4">{{ item.logo }}</div>
              <div class="content_info_item_name">{{ item.name }}</div>
            </div>
            <div class="content_info_item_desc">持股比例：<span>{{ item.shares_ratio }}</span></div>
          </div>
          <div class="content_info_item w50" v-for="(item,key) in holderList" :key="key" v-if="item.type === 1">
            <div class="content_info_item_top">
              <div class="content_info_item_title" :class="'y-' + key%4">{{ item.logo }}</div>
              <div class="content_info_item_name">{{ item.name }}</div>
            </div>
            <div class="content_info_item_desc">持股比例：<span>{{ item.shares_ratio }}</span></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/supplier.png" >
        企业供应商
      </div>
      <div class="content">
        <div class="info">
          企业供应商
        </div>
        <div class="content_des">
          <div class="content_info_item w50" v-for="item,key in supplierList" :key="key">
            <div class="content_info_item_top">
              <div class="content_info_item_title" :class="'y-' + key%4">
                <img :src="item.logo" v-if="item.logo !== ''" >
                <span v-else>{{ item.logo_name }}</span>
              </div>
              <div class="content_info_item_name">{{ item.company_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/gaoguan.png" >
        企业客户
      </div>
      <div class="content">
        <div class="info">
          企业客户
        </div>
        <div class="content_des">
          <div class="content_info_item w50" v-for="item,key in customerList" :key="key">
            <div class="content_info_item_top">
              <div class="content_info_item_title" :class="'y-' + key%4">
                <img :src="item.logo" v-if="item.logo !== ''" >
                <span v-else>{{ item.logo_name }}</span>
              </div>
              <div class="content_info_item_name">{{ item.company_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/layout.png" >
        企业对外投资布局
      </div>
      <div class="icon_des">
        <div class="content_des_item">
          <div class="number">10</div>
          <div class="city">北京</div>
        </div>
        <div class="content_des_item">
          <div class="number">2</div>
          <div class="city">上海</div>
        </div>
        <div class="content_des_item">
          <div class="number">12</div>
          <div class="city">武汉</div>
        </div>
        <div class="content_des_item">
          <div class="number">21</div>
          <div class="city">青岛</div>
        </div>
        <div class="content_des_item">
          <div class="number">10</div>
          <div class="city">南昌</div>
        </div>
        <div class="content_des_item">
          <div class="number">2</div>
          <div class="city">郑州</div>
        </div>
      </div>
    </div>

    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/knowledge.png" >
        企业知识产权
      </div>
      <div class="icon_des">
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/knowledge-1.png" ><div class="fr red">{{ data.patentTotal }}</div></div>
          <div class="title-des">专利数量</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/knowledge-2.png" ><div class="fr red">{{ data.tminfoTotal  }}</div></div>
          <div class="title-des">商标数量</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/knowledge-3.png" ><div class="fr red">{{ data.copyrightTotal }}</div></div>
          <div class="title-des">软著数量</div>
        </div>
      </div>
    </div>
    
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/risk.png" >
        企业经营风险
      </div>
      <div class="icon_des">
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-1.png" ></div>
          <div class="title-des">司法案件</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-2.png" ></div>
          <div class="title-des">被执行人</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-3.png" ></div>
          <div class="title-des">限高消费</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-4.png" ></div>
          <div class="title-des">动产抵押</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-5.png" ></div>
          <div class="title-des">经营异常</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-6.png" ></div>
          <div class="title-des">行政处罚</div>
        </div>
        <div class="icon_des_item">
          <div class="img"><img src="../assets/img/company/risk-7.png" ></div>
          <div class="title-des">股权出质</div>
        </div>
      </div>
    </div>
    <div class="characteristic">
      <div class="title">
        <img src="../assets/img/company/news.png" >
        最新舆情
      </div>
      <van-list
      v-model="isLoad"
      :finished="isfinish"
      finished-text="没有更多了"
      @load="getMore">
        <div class="list" v-for="item,key in news " :key="key" @click="openUrl(item.url)">
          <div class="list_title">{{ item.title }}</div>
          <div class="list_desc">
            <div class="time">{{ item.createtime }}</div>
            <div class="from">{{ item.froms }}</div>
          </div>
        </div>
    </van-list>
    </div>
  </div>
  
	<div class="h50"></div>
	<bottomDetail></bottomDetail>
</div>
</template>
<script>
import { company,companyNews } from '@/api/api.js'
import navTop from '@/components/navTop.vue'
import bottomDetail from '@/components/companyDetail.vue'
export default {
  data() {
    return {
      data:{},
      news:[],
      member: [],
      holderList:[],
      supplierList:[],
      customerList:[],
      total: 0,
      page: 1,
      isfinish: false,
      isLoad: true,
      business: '',
      identification: '',
    }
  },
  components: {
    bottomDetail,
    navTop
  },
  async created() {
    this.page = 1
    this.isfinish = false
    this.isLoad = true
    this.supplierList = []
    this.customerList = []
    this.news = []
    this.holderList = []
    this.identification = this.$route.query.identification
    this.getDetail(this.identification)
    this.getBusiness(this.identification)
    this.getNews(this.identification)
    this.getMember(this.identification)
    this.getHolder(this.identification)
    this.getSupplier(this.identification)
    this.getCustomer(this.identification)
  },
  methods: {
    openUrl(url) {
      window.open(url)
    },
    getDetail(identification) {
      company.getDetail({identification}).then(res=>{
        this.data = res.data
        this.isShow = true
      })
    },
    getCustomer(identification) {
      let data = {
        page: 1,
        psize:10,
        identification: identification,
      }
      company.customerList({...data}).then(res=>{
        res.data.data.forEach((item,key) => {
          item['logo_name'] = item.company_name.slice(0,2)
          this.customerList.push(item)
        });
      })
    },
    getSupplier(identification) {
      let data = {
        page: 1,
        psize:10,
        identification: identification,
      }
      company.supplierList({...data}).then(res=>{
        res.data.data.forEach((item,key) => {
          item['logo_name'] = item.company_name.slice(0,2)
          this.supplierList.push(item)
        });
      })
    },
    getHolder(identification) {
      company.getHolderList({identification}).then(res=>{
        res.data.data.forEach((item,key) => {
          if(item.name !== ""){
            if(item.name.indexOf('公司') !== -1 || item.name.indexOf('有限')!== -1){
              item['type'] = 1;
              item['logo'] = item.name.slice(0,2)
            }else{
              item['type'] = 0;
              item['logo'] = item.name.slice(0,1)
            }
            this.holderList.push(item)
          }
        });
       
      })
    },
    getMember(identification) {
      company.member({identification}).then(res=>{
        this.member = res.data.data
      })
    },
    getBusiness(identification) {
      company.getBusiness({identification}).then(res=>{
        this.business = res.data
      })
    },
    /**
     * 获取更多新闻列表项。
     * 当未完成加载且列表不为空时，页码递增并调用获取新闻的方法。
     * @method getMore
     */
    getMore() {
      if (this.isfinish||this.news.length==0) {
        return
      }
      this.page++
      this.getNews(this.identification)
    },
    getNews(identification) {
      let data = {
        page: this.page,
        identification: identification,
        ...this.query
      }
      companyNews.getList({...data}).then(res=>{
        this.isLoad = false
        this.news.push(...res.data.data)
        this.total = res.data.total
        if (this.news.length >= this.total) {
          this.isfinish = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.companyDetail {
  width: calc(100% - 10px);
  height: 100%;
  padding: 5px;
  background-color: #F7F7F7;
  .companyDetail-top {
    width: calc(100% - 10px);
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 5px;
    .top {
      width: 100%;
      display: flex;
      .logo {
        width: 45px;
        height: 45px;
        padding: 2.5px;
        border: 1px solid #fff;
        border-radius: 5px;
        box-shadow: 3px 3px 3px 3px #E5F2FD;
        img {
          width: 40px;
          height: 40px;
        }
      }
      .company_name {
        width:  calc(100% - 100px);
        font-family: PingFang-SC-Bold;
        font-size: 20px;
        font-weight: 500;
        padding: 0px 10px;
      }
      .company_score{
        width: 75px;
        color:#FA8A26;
        font-family: PingFang-SC-Bold;
        .score{
          font-size: 34px;
          font-weight: bold;
          text-align: center;;
        }
        .score_title{
          font-size: 12px;
          font-family: PingFang-SC-Medium;
          text-align: center;
        }
      }
    }
    .tel {
      width: 100%;
      height: 20px;
      display: flex;
      padding-left: 55px;
      margin: 10px 0 0 0;
      .icon {
        width: 15px;
        height: 15px;
      }
      .telphone {
        margin: 0 5px;
        font-size: 16px;
        color:#FA8A26;
      }
      .more{
        color:#FA8A26;
        font-size: 12px;
        .imore {
          width: 10px;
          height: 10px;
        }
      }
    }
    .label_list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .blue {
        color:#138AF2;
        background: rgba(19,138,242,0.1);
        border-radius: 6px;
        padding:2px 5px;
      }
      .orige {
        color:#FA8A26;
        background: rgba(235,116,24,0.1);
        border-radius: 6px;
      }
      .label {
        font-size: 12px;
        padding: 5px;
        margin: 5px;
      }
    }
    .address {
      margin-top: 10px;
      background-color: #FEF7EE;
      padding: 15px 10px;
      font-size: 13px;
      border-radius: 5px;
      .city{
        img{
          width: 15px;
          margin-right: 5px;
        }
      }
      .address_info{
        margin-top: 5px;
      }
    }
  }
  .analysis {
    width: calc(100% - 10px);
    background-color: #fff;
    padding:20px;
    margin-top: 5px;
    .content {
      background-color: #F2F9FF;
      width: calc(100% - 40px);
      padding: 15px 5px 15px 10px;
      border-radius: 5px;
      border: 1px dashed #138AF2;
      display: flex;
      .des {
        font-size: 14px;
        margin-top: 5px;
      }
      .btn {
        background-color: #138AF2;
        padding:5px 15px;
        color: #fff;
        border-radius: 30px;
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
  .characteristic {
    width: 100%;
    background-color: #fff;
    margin-top: 5px;
    img {
      width: 20px;
      height: 20px;
      padding-top: 10px;
    }
    .title {
      font-size: 18px;
      font-weight: 400;
      font-family: PingFang-SC-Bold;
      margin-left: 10px;
    }
    .list {
      padding: 15px 8px;
      height: 80px;
      border-bottom: 1px solid #F0F0F0 ;
      .list_title {
        font-family: PingFang-SC-Regular;
        font-size: 16px;
      }
      .list_desc {
        display: flex;
        flex-wrap: wrap;
        color:#999999;
        margin: 10px 0 0 0;
        .from {
            margin-left:10px;
            border-left: 1px solid #F0F0F0;
            padding-left: 10px;
        }
      }
    }
    .icon_des {
      margin-top: 10px;
      border-top: 1px solid #F0F0F0;
      display: flex;
      flex-wrap: wrap;
      .content_des_item:nth-child(2n){
        background-color: #F8F8F8;
      }
      .content_des_item:nth-child(2n-1){
        background-color: #FEF7EE;
      }
      .content_des_item {
        width: calc(25% - 2px);
        text-align: center;
        margin: 1px;
        padding-bottom: 20px;
        .number {
          color:#FA8A26;
          font-family: PingFang-SC-Bold;
          font-size: 25px;
          padding: 20px 8px 0px 8px;
        }
        .address {
          font-family: PingFang-SC-Regular;
        }
      }
      .icon_des_item {
        width: calc(25% - 1px);
        text-align: center;
        border-bottom: 1px solid #F0F0F0;
        border-right: 1px solid #F0F0F0;
        .img {
          padding: 15px;
          font-size:9px;
          img{
            width: 20px;
            height: 20px;
          }
        }
        .title-des{
          font-size: 14px;
          font-family: PingFang-SC-Regular;
          padding-bottom: 20px;
        }
      }
    }
    .des_des {
      display: flex;
      flex-wrap: wrap;
      .des_des_item{
        width: calc(25% - 10px);
        background-color: #F8F8F8;
        padding: 10px;
        margin: 5px;
        .score {
          padding: 20px 30px;
          color:#FA8A26;
          font-size: 27px;
          font-weight: 600;
          font-family: PingFang-SC-Bold;
        }
        .icon {
          text-align: center;
          img{
            width: 30px;
            height: 30px;
          }
        }
        .orige {
          color:#FA8A26;
        }
        .title-des {
          font-size: 16px;
          text-align: center;
        }
      }
    }
    .content {
      width: calc(100% - 10px);
      display: table;
      align-items: center;
      text-align: center;
      padding: 10px 5px;
      .info {
        width: 30px;
        background-color: #FEF7EE;
        color:#FA8A26;
        font-size: 16px;
        margin: 10px;
        display: table-cell;
        vertical-align: middle;
      }
      .content_des {
        width: calc(100% - 10px);
        display: flex;
        flex-wrap: wrap;
        .content_info_item {
          width: calc(33% - 13px);
          margin: 2px;
          background-color: #F8F8F8;
          padding: 5px ;
          height: 70px;
          .content_info_item_top {
            display: flex;
            width: 100%;
            .y-0 {
              background-color: #E79FA0;
            }
            .y-1 {
              background-color: #C398E1;
            }
            .y-2 {
              background-color: #97BB71;
            }
            .y-3 {
              background-color: #49A5F5;
            }
            .content_info_item_title {
              width: 35px;
              height: 35px;
              line-height: 35px;
              color:#fff;
              font-size: 11px;
              img {
                width: 100%;
                height: 100%;
                padding:0 !important;
              }
            }
            .content_info_item_name {
              width: calc(100% - 35px);
              font-size: 12px;
              padding-left: 2px;
              text-align: left;
              color:#666666;
              white-space: pre-wrap;
            }
          }
         .content_info_item_desc{
            text-align: left;
            width: 100%;
            font-size: 11px;
            color:#666666;
            line-height: 15px;
            margin-top: 5px;
            span{
              color:#000;
            }
         }
        }
        .w50 {
          width: calc(50% - 14px);
        }
      }
    }
  
  }
  .companyInfo {
    width: calc(100% - 10px);
    background-color: #fff;
    margin-top: 5px;
    padding: 15px 5px;
    img {
      width: 20px;
      height: 20px;
    }
    .title {
      font-size: 20px;
      font-weight: 400;
      font-family: PingFang-SC-Bold;
      margin-left: 10px;
    }
    .des {
      font-size: 16px;
      line-height: 25px;
      margin-top: 10px;
      padding: 2px;
    }
    .more {
      text-align: center;
      margin: 10px 0 5px 0;
    }
  }
.foundation {
    width: calc(100% - 10px);
    background-color: #fff;
    margin-top: 5px;
    padding: 15px 5px;
    display: table;
    align-items: center;
  .info {
      font-size: 18px;
      font-weight: 400;
      width: 30px;
      background-color: #FEF7EE;
      height: 285px;
      text-align: center;
      display:table-cell; vertical-align:middle
  }
 .info_list {
    width: calc(100% - 10px);
    display: flex;
    flex-wrap: wrap;
    margin-left: 5px;
    .orige {
      background-color: #FEF7EE;
    }
   .info_item {
      width: calc(100% - 10px);
      padding: 10px;
      display: flex;
     .info_item_title {
       font-size: 14px;
       color: #000;
       width: 30%;
     }
     .info_item_des {
       font-size: 14px;
       color: #000;
     }
   }
  }
 }
 .fr{
  float: right;
 }
 .red{
  color:red;
 }
}
</style>